<template>
    <div style="height: 100%">
        <a-card title="今日待跟进" style="height: 100%">
          <div
            class="demo-infinite-container"
            :infinite-scroll-disabled="busy"
            :infinite-scroll-distance="10"
          >
            <a-list :data-source="data">
              <a-list-item slot="renderItem" slot-scope="item, index">
                <a-list-item-meta>
                  <template #description>
                    <span style="color: black">上次跟进内容：<span style="color: darkgrey">{{item.content}}</span></span>
                  </template>
                  <p slot="title" @click="toInfoTab(item.customerId, item.customerName)" style="cursor:pointer;">{{ item.customerName }}</p>
                  <a-avatar
                    slot="avatar"
                    style="color: #f56a00; backgroundColor: #fde3cf"
                  >{{ item.customerName.substring(0, 1) }}</a-avatar>
                </a-list-item-meta>
                <div style="color: orange;font-size: 11px">今日待跟进：{{ item.nextFollowTime | formatDate }}</div>
              </a-list-item>
              <div v-if="loading && !busy" class="demo-loading-container">
                <a-spin />
              </div>
            </a-list>
          </div>
        </a-card>
    </div>
</template>
<script>
  import { getAction } from '@/api/manage'
  import { formatDate } from "@/utils/util";
  export default {
    name: "FollowUp",
    components: {
    },
    filters: {
      formatDate(time){
        return formatDate(time, 'yyyy-MM-dd HH:mm')
      }
    },
    data() {
      return {
        data: [],
        url: {
          getData: "/ghFollowRecord/queryListById",
        },
        loading: false,
        busy: false,
      }
    },
    methods: {
      initData() {
        getAction(this.url.getData).then(res => {
          if (res.success) {
            this.data = res.result;
          }
        });
      },
      toInfoTab(id, name) {
        this.$router.push({ path: "/infoTab", query: {id: id, name: name}});
      },
    }
  }
</script>
<style>
.demo-infinite-container {
  overflow: auto;
  height: 260px;
}
.demo-loading-container {
  position: absolute;
  bottom: 40px;
  width: 100%;
  text-align: center;
}
</style>